<template>
  <div>
    <div class="colorBox" :style="{'background-color':color()}"></div>
    <div>
      R:<input type="range"  max="255" v-model="r" /> 
      <span id="span1">{{r}}</span>
      G:<input type="range"  max="255" v-model="g"/>
      <span id="span2">{{g}}</span>
      B:<input type="range"  max="255" v-model="b"/> 
      <span id="span2">{{b}}</span>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      r:0,
      g:0,
      b:0
    }
  },
  methods: {
    color(){
      return `rgb(${this.r},${this.g},${this.b})`
    }
  }
 
}
</script>
<style scoped>
.colorBox {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
}
/* div{
  background-color: rgb(255, 255, 255);
} */
</style>